<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 50px auto;
            background-color: lightgoldenrodyellow;
        }
    </style>
</head>

<body>
    <div class="box">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
            <circle cx='250' cy='250' r='100' fill='transparent' stroke='black' stroke-width='1'></circle>
            <circle cx='250' cy='250' r='90' fill='transparent' stroke='black' stroke-width='1'></circle>
            <circle cx='250' cy='250' r='80' fill='transparent' stroke='black' stroke-width='1'></circle>
            <circle cx='250' cy='250' r='70' fill='transparent' stroke='black' stroke-width='1'></circle>
            <circle cx='250' cy='250' r='60' fill='transparent' stroke='black' stroke-width='1'></circle>
            <circle cx='250' cy='250' r='50' fill='transparent' stroke='black' stroke-width='1'></circle>
            <circle cx='250' cy='250' r='40' fill='transparent' stroke='black' stroke-width='1'></circle>
            <circle cx='250' cy='250' r='30' fill='transparent' stroke='black' stroke-width='1'></circle>
            <circle cx='250' cy='250' r='20' fill='transparent' stroke='black' stroke-width='1'></circle>
            <circle cx='250' cy='250' r='10' fill='transparent' stroke='black' stroke-width='1'></circle>
            <circle cx='250' cy='250' r='2' fill='black'></circle>
            <line x1='250' y1='100' x2='250' y2='400' stroke='red'></line>
            <line x1='100' y1='250' x2='400' y2='250' stroke='red'></line>
        </svg>
    </div>
</body>

</html>